<script setup lang="ts">
import {
  ref,
  onMounted,
  getCurrentInstance,
} from 'vue'
import {useRouter, useRoute} from "vue-router";
import {Back} from '@element-plus/icons-vue'

const global = getCurrentInstance().appContext.config.globalProperties;

// 路由相关
const router = useRouter();
const route = useRoute();
const {query} = useRoute();

// 演出信息
const performance = ref({
  pid: '',
  pname: '',
  purl: '',
  pdetail: '',
  pprice: '',
  ptime: '',
  plocation: ''
})

// 页面加载时获取演出详情
onMounted(() => {
  console.log('路由query中的id：', query.id);
  if (query.id) {
    getPerformance();
  } else {
    console.warn('缺少演出ID参数');
  }
})

// 获取演出详情数据
const getPerformance = () => {
  global.$http.get(`/public/maoyanmovieproject/queryPerformanceById/${query.id}`)
      .then(resp => {
        console.log(resp.data);
        performance.value = resp.data;
      }).catch(err => {
    console.error('获取演出信息失败:', err);
  })
}

// 返回上一页
const testRouter = () => {
  router.go(-1)
}

// 购票按钮点击事件
const myClick = () => {
  let userId = localStorage.getItem('userId');
  if (!userId) {
    router.push({ name: 'LoginView' });
    return;
  } else {
    router.push({ name: 'buy-ticket', query: { id: performance.value.pid } });
  }
};

</script>

<template>
  <div class="performance-detail">
    <!-- 返回图标 -->
    <el-icon style="font-size: 24px; cursor: pointer; margin-bottom: 16px; color: #666;" @click="testRouter">
      <Back/>
    </el-icon>

    <div v-if="performance.pname" class="detail-card">
      <h1 class="performance-title">{{ performance.pname }}</h1>
      <div class="myImage">
        <el-image
            :src="performance.purl"
            fit="none"
            class="performance-image"
            :preview-src-list="[performance.purl]">
        </el-image>
      </div>
      <div class="performance-info">
        <p class="info-item"><strong>详情：</strong>{{ performance.pdetail }}</p>
        <p class="info-item"><strong>价格：</strong><span >¥ {{ performance.pprice }}</span></p>
        <p class="info-item"><strong>时间：</strong>{{ performance.ptime }}</p>
        <p class="info-item"><strong>地点：</strong>{{ performance.plocation }}</p>
      </div>
    </div>

    <div v-else class="loading">
      <el-empty description="加载中..."/>
    </div>
  </div>

  <!-- 底部购票按钮 -->
  <el-affix position="bottom" offset-bottom="0">
    <el-button @click="myClick" type="primary" class="buy-ticket-btn">立即购票</el-button>
  </el-affix>
</template>

<style scoped>
.performance-detail {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  min-height: calc(100vh - 60px);
}

/* 卡片容器样式 */
.detail-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 24px;
  overflow: hidden;
  /*
  text-align: center; !* 新增：使内部 inline 元素（图片）水平居中 *!
  */
}

/* 标题样式 */
.performance-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px;
  text-align: center;
  line-height: 1.3;
}

/* 图片样式 - 减小了上下边距 */
.performance-image {
  max-width: 100%;
  border-radius: 8px;
  margin: 0 0 16px; /* 重点：将原来的20px减小为16px，并去掉上边距 */
  transition: transform 0.3s ease;
  text-align: center; /* 新增：使内部 inline 元素（图片）水平居中 */

}

.performance-image:hover {
  transform: translateY(-2px);
}

/* 信息区域样式 */
.performance-info {
  color: #555;
  line-height: 1.8;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

/* 信息项样式 */
.info-item {
  margin: 12px 0;
  padding: 0;
  font-size: 15px;
}

.info-item strong {
  color: #333;
  min-width: 60px;
  display: inline-block;
}

/* 价格样式突出显示 */
.price {
  color: #ff4d4f;
  font-weight: 500;
}

/* 加载状态样式 */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 购票按钮样式优化 */
.buy-ticket-btn {
  width: 100%;
  height: 56px;
  font-size: 18px;
  border-radius: 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .performance-detail {
    padding: 12px;
  }

  .detail-card {
    padding: 16px;
  }

  .performance-title {
    font-size: 20px;
  }

  .performance-image {
    max-height: 300px;
  }
}
.myImage{
  text-align: center; /* 新增：使内部 inline 元素（图片）水平居中 */
}
</style>
